<template>
    <div class="login-body">
        <div class="login-container">
            <div class="head">
                <img src="../assets/login.png" />
                <div class="name">
                    <div class="title">车管家</div>
                    <div class="tips">后台管理系统</div>
                </div>
            </div>
            <el-form
                label-position="top"
                :rules="rules"
                :model="ruleForm"
                ref="loginForm"
                class="login-form"
            >
                <el-form-item label="手机号" prop="userName">
                    <el-input type="text" v-model.trim="ruleForm.userName" autocomplete="off">
                    </el-input>
                </el-form-item>
                 <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model.trim="ruleForm.password" autocomplete="off">
                    </el-input>
                </el-form-item>
                 <el-form-item>
                    <div style="color: #333">登录表示您已同意<a>《服务条款》</a></div>
                    <el-button style="width: 100%" type="primary" @click="submitForm">立即登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts">
import { useStore } from 'vuex';
import { ApiClient } from '../utils/apiClient';
import { reactive, ref, toRefs, defineComponent } from 'vue';
import { localstorage, url } from '../utils/index';
import { ElMessage } from 'element-plus';
import * as types from "../store/types";
import { key } from '../store/index';

export default defineComponent({
    name: 'Login',
    setup() {
        const loginForm = ref();
        const store = useStore();

        const state = reactive({
            ruleForm: {
                userName: '',
                password: ''
            },
            rules: {
                userName: [
                    {
                        required: 'true',
                        message: '手机号不能为空',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: 'true',
                        message: '密码不能为空',
                        trigger: 'blur'
                    }
                ]
            }
        });

        const submitForm = () => {
            loginForm.value.validate((valid) => {
                const isAdmin = state.ruleForm.userName === '18969175865';

                if (valid && isAdmin) {
                    const apiClient = new ApiClient();

                    apiClient.post(url.login, null,
                        {
                            phone: state.ruleForm.userName,
                            password: state.ruleForm.password
                        }).then(res => {
                            if (res.status == -1) {
                                ElMessage.error('登录失败!');
                            } else {
                                store.commit(types.SAVE_USER, { token: res.data, userName: state.ruleForm.userName });
                                localstorage.set('token', res.data);
                                localstorage.set('userName', state.ruleForm.userName);

                                window.location.href = '/';
                            }
                        });
                } else {
                    ElMessage.warning('登录失败!');
                }
            })
        }

        return {
            ...toRefs(state),
            loginForm,
            submitForm
        }
    }
})
</script>

<style scoped>
    .login-body {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color: #fff;
    }

    .login-container {
        width: 420px;
        height: 500px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0px 21px 41px 0px rgba(0, 0, 0, 0.2);
    }

    .head {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px 0 20px 0;
    }

    .head img {
        width: 100px;
        height: 100px;
        margin-right: 20px;
    }

    .head title {
        font-size: 28px;
        color: #1BAEAE;
        font-weight: bold;
    }

    .head tips {
        font-size: 12px;
        color: #999;
    }

    .login-form {
        width: 70%;
        margin: 0 auto;
    }
</style>